<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 260px;
            height: 50px;
            margin: 100px auto;
        }

        .hr,
        .mt,
        .sd {
            display: block;
            float: left;
            width: 60px;
            height: 50px;
            background-color: black;
            color: #fff;
            text-align: center;
            line-height: 50px;
            font-weight: 700;

        }

        span:nth-child(2) {
            margin: 0 5px;
        }
    </style>
</head>

<body>
    <div>

        <span class="hr">1</span>
        <span class="mt">2</span>
        <span class="sd">3</span>
    </div>
    <script>
        var hr = document.querySelector('.hr')
        var mt = document.querySelector('.mt')
        var sd = document.querySelector('.sd')
        // 获得的系统当前时间戳的格式是会带年月日的 所以我们传递未知时间戳格式也要带年月日 不然无法进行时间戳的相减运算 会导致报错
        var inputTime = +new Date('2022-7-1 18:00:00')
        // 先调用一次倒倒计时函数 （因为不先调用一次倒计时的话 在定时器延时的1s内 会显示原始标签内容 不太好看）
        getTime()
        // 然后用定时器每隔一秒调用一次倒计时函数
        setInterval(getTime, 1000)
        function getTime() {
            var nowTime = +new Date()
            var times = (inputTime - nowTime) / 1000
            var h = parseInt(times / 60 / 60 % 24)
            h = h < 10 ? '0' + h : h
            hr.innerHTML = h
            var m = parseInt(times / 60 % 60)
            m = m < 10 ? '0' + m : m
            mt.innerHTML = m
            var s = parseInt(times % 60)
            s = s < 10 ? '0' + s : s
            sd.innerHTML = s
        }



    </script>
</body>

</html>